<script lang="ts">
import { reactive, ref } from "vue";

import { DwtUIOperations } from "./tools/dwtUIOperations";
import { getSelectEl } from "./tools/common";

let scanOptions = reactive({
  IfShowUI: false,
  IfFeederEnabled: true,
  IfAutoDiscardBlankpages: false,
  IfDuplexEnabled: false,
  PixelType: "1",
  Resolution: "200"
});

export default {
  props: {
    dwtUtil: {
      required: true,
      type: DwtUIOperations
    }
  },

  data() {
    return {
      scanOptions
    };
  },

  methods: {
    onSourceChange(event: Event) {
      let sourceEl = event.target as HTMLSelectElement;
      this.dwtUtil.handleDeviceChanged(sourceEl.value);
    },

    acquireImage(evt: Event) {
      console.log("acquireImage", scanOptions);
      let sourceEl = getSelectEl("source");
      this.dwtUtil.acquireImage(sourceEl?.value, scanOptions);
    },

    loadImagesOrPDFs(evt: Event) {
      this.dwtUtil.loadImage();
    },

    test(val: any) {
      console.log(val);
    }
  }
};
</script>

<template>
  <div id="divScanner" class="divinput">
    <ul class="PCollapse">
      <li>
        <div class="divType">自定义扫描</div>
        <div id="div_ScanImage" class="divTableStyle">
          <ul id="ulScaneImageHIDE">
            <li>
              <label for="source">
                <p>选择来源:</p>
              </label>
              <select size="1" id="source" style="position: relative" @change="onSourceChange($event)"></select>
            </li>
            <li id="divProductDetail">
              <ul id="divTwainType">
                <li>
                  <!-- <label style="width: 165px" id="lblShowUI" for="showUI">
                    <input type="checkbox" id="showUI" v-model="scanOptions.IfShowUI" />显示扫描仪 UI</label
                  > -->
                  <el-checkbox v-model="scanOptions.IfShowUI" label="显示扫描仪 UI" />

                  <!-- <label for="pageFeeder">
                    <input type="checkbox" id="pageFeeder" v-model="scanOptions.IfFeederEnabled" />使用 ADF</label
                  > -->
                  <el-checkbox v-model="scanOptions.IfFeederEnabled" label="使用 ADF" />
                </li>
                <li>
                  <!-- <label style="width: 165px" for="DiscardBlankPage">
                    <input
                      type="checkbox"
                      id="DiscardBlankPage"
                      v-model="scanOptions.IfAutoDiscardBlankpages"
                    />自动删除空白页</label
                  > -->
                  <el-checkbox v-model="scanOptions.IfAutoDiscardBlankpages" label="自动删除空白页" />
                  <!-- <label for="Duplex"><input type="checkbox" id="Duplex" v-model="scanOptions.IfDuplexEnabled" />双面扫描</label> -->
                  <el-checkbox v-model="scanOptions.IfDuplexEnabled" label="双面扫描" />
                </li>
                <li>
                  像素类型:
                  <label for="BW" style="margin-left: 5px" class="lblPixelType"
                    ><input type="radio" id="BW" name="PixelType" v-model="scanOptions.PixelType" value="0" />B&amp;W
                  </label>
                  <label for="Gray" class="lblPixelType"
                    ><input type="radio" id="Gray" name="PixelType" v-model="scanOptions.PixelType" value="1" />Gray</label
                  >
                  <label for="RGB" class="lblPixelType"
                    ><input type="radio" id="RGB" name="PixelType" v-model="scanOptions.PixelType" value="2" />Color</label
                  >
                  <!-- <div>{{ scanOptions.PixelType }}</div>
                  <el-radio-group v-model="scanOptions.PixelType" @change="test">
                    <el-radio :value="'0'">B&amp;W</el-radio>
                    <el-radio :value="'1'">Gray</el-radio>
                    <el-radio :value="'2'">Color</el-radio>
                  </el-radio-group> -->
                </li>
                <li>
                  <span>分辨率:</span>
                  <select class="custom-select w-50" id="Resolution" size="1" v-model="scanOptions.Resolution">
                    <option value="100">100</option>
                    <option value="150">150</option>
                    <option value="200" selected>200</option>
                    <option value="300">300</option>
                  </select>
                </li>
              </ul>
            </li>
            <li>
              <input id="btnScan" class="btnScanGray btnScanActive" type="button" value="扫描" @click="acquireImage($event)" />
              <a id="btnLoad" class="btnLoadAndSave" @click="loadImagesOrPDFs($event)">引入本地图片 &gt;</a>
            </li>
          </ul>
          <div id="divNoScanners" style="visibility: hidden">
            <a href="javascript: void(0)" class="ClosetblLoadImage"
              ><img class="imgClose" :src="'assets/Images/Close.png'" alt="Close tblLoadImage"
            /></a>
            <img :src="'assets/Images/Warning.png'" />
            <span class="spanContent">
              <p class="contentTitle">No TWAIN compatible drivers detected</p>
              <p class="contentDetail">You can Install a Virtual Scanner:</p>
              <p class="contentDetail">
                <a id="samplesource32bit" href="https://download.dynamsoft.com/tool/twainds.win32.installer.2.1.3.msi"
                  >32-bit Sample Source</a
                >
                <a
                  id="samplesource64bit"
                  style="display: none"
                  href="https://download.dynamsoft.com/tool/twainds.win64.installer.2.1.3.msi"
                  >64-bit Sample Source</a
                >
                from <a target="_blank" href="http://www.twain.org">TWG</a>
              </p>
            </span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<style>
input[type="radio"]:checked {
  accent-color: var(--el-checkbox-checked-text-color);
}
</style>

<style lang="scss">
/* stylelint-disable-next-line selector-id-pattern */
#divTwainType {
  li {
    display: flex;
    .el-checkbox {
      display: flex;
      min-width: 120px;
      height: 20px;
    }
    .el-radio-group {
      margin-left: 8px;
    }
  }
}
</style>
